<template>
    <div class="c-area-linkage">
      <a-cascader
          :allowClear="false"
          :options="projectAreaOptions"
          v-model="innerValue"
          :default-value="defaultValue"
          placeholder="请选择区域"
          :loadData="loadAreaData"
          @change="handleChange"
          :getPopupContainer="(trigger) => {return trigger.parentElement}">
      </a-cascader>
    </div>
</template>

<script>
  import { getAction } from '@/api/manage'
  import { filterObj } from '@/utils/util';
  export default {
    name: 'CAreaLinkage',
    props: {
      value: {
        type: String,
        required:false
      },
      width: {
        type: String,
        default: '100%'
      }
    },
    data() {
      return {
        projectAreaOptions:[],
        innerValue: ['zhejiang', 'hangzhou', 'xihu'],
        defaultValue: [],
        usedListeners: ['change'],
        enums: {
          type: ['cascader', 'select']
        },
        reloading: false,
        areaData:''
      }
    },
    computed: {
      _listeners() {
        let listeners = { ...this.$listeners }
        // 去掉已使用的事件，防止冲突
        this.usedListeners.forEach(key => {
          delete listeners[key]
        })
        return listeners
      },
    },
    mounted(){
      
    },
    watch: {
      
      value: {
        immediate: true,
        handler() {
          this.loadDataByValue(this.value)
        }
      },
    },
    async created() {
      
      this.projectAreaOptions=await this.getAreaList() || [];
    },
    methods: {
  
      /** 重新加载组件 */
      reload() {
        this.reloading = true
        this.$nextTick(() => this.reloading = false)
      },
  
      /** 通过 value 反推 options */
      async loadDataByValue(value) {
        console.log(value);
        if (!value || value.length === 0) {
          
          this.innerValue = []
        } else {
          console.log(this.innerValue.length);
          console.log(this.innerValue);
          if(this.innerValue.length==0){
            let arr =await this.getAreaByCode(value);
            this.defaultValue = arr;
            this.innerValue = arr;
          }
        }
        this.reload()
      },
      
      handleChange(values) {
        console.log(values);
        let value = values[values.length - 1]
        this.$emit('change', value.toString())
      },
    
      getAreaList(code) {
        var param={"code":code};
        return getAction("/region/getRegion",filterObj(param)).then(res => {
          let arr = res.map(item => {
                  return {
                      value: item.id,
                      label: item.label,
                      isLeaf: item.isLeaf,
                  }
              })
          return arr;
        })
      },
      getAreaByCode(code) {
        var param={"code":code};
        return getAction("/region/getRegionArr",filterObj(param)).then(res => {
          return res;
        })
      },
      //获取下一级数据
      async loadAreaData(selectedOptions) {           
          if (!this.projectAreaOptions.length) {
              this.projectAreaOptions = await this.getAreaList() || [];
          } else {
              const targetOption = selectedOptions[selectedOptions.length - 1];
              console.log(targetOption);
              targetOption.loading = true;
              const data = await this.getAreaList(targetOption.value);
              console.log(data, 'targetOption.value', targetOption.value);
              if (data.length) {
                  for (let index = 0; index < data.length; index ++) {
                      const element = data[index];
                      if (element.children) { delete  element.children }
                      element.value = element.value;
                      element.isLeaf = element.isLeaf;;
                  }
                  targetOption.loading = false;
                  targetOption.children = [...data];                   
                  this.projectAreaOptions = JSON.parse( JSON.stringify(this.projectAreaOptions) );
              } else {
                  targetOption.loading = false;
                  targetOption.isLeaf = true;
              }
          }
      },
    },
    model: { prop: 'value', event: 'change' },
  }
</script>

<style>
  .c-area-linkage {
    height:40px;
    /deep/ .area-cascader-wrap .area-select {
      width: 100%;
    }
  
    /deep/ .area-select .area-selected-trigger {
      line-height: 1.15;
    }
  }
</style>
